<template>
    <div class="box">
        <el-form class="top" ref="form" :model="formData">
            <el-form-item label="姓名">
                <el-input v-model="formData.name" style="width: 100px"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="formData.age" style="width: 100px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSubmit">提交</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="users">
            <el-table-column prop="name" label="姓名" width="220"></el-table-column>
            <el-table-column prop="age" label="年龄" width="220"></el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button type="text" size="big" @click="handleDelete(scope.$index)">删除</el-button>
                    <el-button type="text" size="big" @click="handleDetail(scope.$index)">详情</el-button>
                    <el-button type="text" size="big" @click="handleRevise(scope.$index)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>


    </div>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                name: '',
                age: '',
            },
            users: [],
            dialogVisible: false,
            selectedUser: {},
        };
    },
    methods: {
        // 从 localStorage 获取数据
        loadData() {
            const storedUsers = localStorage.getItem("users");
            if (storedUsers) {
                this.users = JSON.parse(storedUsers);
            }
        },
        // 保存数据到 localStorage
        saveData() {
            localStorage.setItem("users", JSON.stringify(this.users));
        },
        // 添加
        handleSubmit() {
            if (this.formData.name && this.formData.age) {
                this.users.push({ ...this.formData });
                this.formData = { name: '', age: '' };
            } else {
                alert('请填写完整信息');
            }
            this.saveData(); // 保存数据到 localStorage
        },
        // 删除
        handleDelete(index) {
            this.users.splice(index, 1);
            this.saveData()
        },
        //修改
        handleRevise(index) {
            console.log(this.users);
            const a = prompt('修改你的名字');
            const b = prompt('修改你的年龄');
            this.users[index].name = a
            this.users[index].age = b
            this.saveData(); // 保存数据到 localStorage
        },
        // 详情
        handleDetail(index) {
            this.selectedUser = { ...this.users[index] };
            this.dialogVisible = true;
            console.log(this.selectedUser);
            alert(JSON.stringify(this.selectedUser))
        },


    },
    // 
    mounted () {
        this.loadData()
    }
};
</script>
<style scoped>
.box {
    padding: 2%;
    background-color: #fff;
}
.top{
    display: flex;
}

</style>
